<template>
    <div>
        <el-tabs v-model="managerIndex" @tab-click="handleClick" class="manager-tabs">
            <el-tab-pane label="广告系列" name=0></el-tab-pane>
            <el-tab-pane label="广告组" name=1></el-tab-pane>
            <el-tab-pane label="广告" name=2></el-tab-pane>
            <el-tab-pane label="A／B测试" name=3></el-tab-pane>
        </el-tabs>
        <nuxt-child/>
    </div>
</template>

<script>
    import { getParam ,changeParam} from '~/assets/js/global'
    import { MANAGER_INDEX ,RELOAD_STATUS} from '../../store/mutation-types/manager/index'
    import Vue from 'vue'
    import { mapGetters} from 'vuex';
    import {Tabs,TabPane ,Scrollbar} from 'element-ui';
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(Scrollbar);

    export default {
        layout: 'facebook-manager',
        head(){
            return{
                title: 'ADS-Facebook广告管理'
            }
        },
        methods: {
            handleClick(tab, event) {
                this.$router.push('/manager/facebook/'+ tab.name);
                this.$store.commit(MANAGER_INDEX, { managerIndex: tab.name});
            },
            changeTabs(){
                this.$store.commit('ENABLE_EXPORT',{'enableExport': false});   //禁止导出按钮
                let url = window.location.href;
                url = url.substring(url.lastIndexOf("/"));
                let tab = url.charAt(1);
                switch (tab){
                    case '1':
                        this.$store.commit(MANAGER_INDEX, { managerIndex: '1'});
                        break;
                    case '2':
                        this.$store.commit(MANAGER_INDEX, { managerIndex: '2'});
                        break;
                    case '3':
                        this.$store.commit(MANAGER_INDEX, { managerIndex: '3'});
                        break;
                    default:
                        this.$store.commit(MANAGER_INDEX, { managerIndex: '0'});
                }
            }
        },
        computed : {
            ...mapGetters({
                'managerIndex' : 'getManagerIndex',
            })
        },
        watch:{
            $route:function () {
                this.changeTabs();
            }
        },
        mounted(){
            this.changeTabs();
        }
    }
</script>
